Highcharts এ ইভেন্ট হ্যান্ডলিং ব্যবহার করে আপনি চার্টের বিভিন্ন ইন্টারঅ্যাকশন যেমন ক্লিক, হোভার, মাউসওভার, ডাবল ক্লিক ইত্যাদি পরিচালনা করতে পারেন। এই ইভেন্টগুলো ব্যবহারকারীর সাথে চার্টের ইন্টারঅ্যাকশনকে আরও উন্নত এবং ইন্টারঅ্যাকটিভ করে তোলে।

Highcharts বিভিন্ন ইভেন্ট হ্যান্ডলিং সমর্থন করে, যার মাধ্যমে আপনি মাউস ইভেন্ট, কীবোর্ড ইভেন্ট, বা চার্টের নির্দিষ্ট উপাদানগুলোর সাথে ইন্টারঅ্যাকশন করতে পারেন। নিচে ক্লিক, হোভার, এবং অন্যান্য ইভেন্ট হ্যান্ডলিং কাস্টমাইজ করার পদ্ধতি দেয়া হলো।

1. ক্লিক ইভেন্ট হ্যান্ডলিং

আপনি যদি চার্টের কোন উপাদান (যেমন সিরিজ, পয়েন্ট, টুলটিপ ইত্যাদি) ক্লিক করার জন্য ইভেন্ট হ্যান্ডলিং করতে চান, তবে click ইভেন্ট ব্যবহার করতে পারেন।

• পয়েন্টে ক্লিক করার ইভেন্ট:

  নিচে একটি উদাহরণ দেওয়া হলো যেখানে চার্টের পয়েন্টে ক্লিক করা হলে একটি মেসেজ কনসোলে প্রদর্শিত হবে:

  import { Component } from '@angular/core';
  import * as Highcharts from 'highcharts';
  
  @Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.css']
  })
  export class ChartComponent {
    Highcharts = Highcharts;
    chartOptions = {
      chart: {
        type: 'column',
        events: {
          click: function (event) {
            alert('Chart clicked at: ' + event.xAxis[0].value);
          }
        }
      },
      title: {
        text: 'Click Event Example'
      },
      series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5, 6]
      }]
    };
  }
  

এখানে, যখন আপনি চার্টে কোথাও ক্লিক করবেন, তখন event.xAxis[0].value সেই ক্লিকের x-অ্যাক্সিসের মান প্রদর্শন করবে।

2. হোভার ইভেন্ট হ্যান্ডলিং

Highcharts এ হোভার (mouse hover) ইভেন্ট হ্যান্ডলিং ব্যবহৃত হয় চার্টের উপাদানগুলোর উপর মাউস হোভার করলে, যেমন পয়েন্টের উপর হোভার করলে টুলটিপ প্রদর্শন বা কাস্টম স্টাইলিং পরিবর্তন করা।

• পয়েন্টে হোভার করার ইভেন্ট:

  এখানে একটি উদাহরণ দেওয়া হলো যেখানে পয়েন্টে হোভার করলে তার রঙ পরিবর্তিত হবে:

  import { Component } from '@angular/core';
  import * as Highcharts from 'highcharts';
  
  @Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.css']
  })
  export class ChartComponent {
    Highcharts = Highcharts;
    chartOptions = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Hover Event Example'
      },
      plotOptions: {
        series: {
          states: {
            hover: {
              enabled: true,  // Hover effect enabled
              color: '#FF5733'  // Change the color when hovered
            }
          }
        }
      },
      series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5, 6]
      }]
    };
  }
  

এখানে, যখন আপনি চার্টের কোনও পয়েন্টে হোভার করবেন, তখন তার রঙ #FF5733 পরিবর্তিত হবে।

3. ডাবল ক্লিক ইভেন্ট হ্যান্ডলিং

Highcharts এ ডাবল ক্লিক ইভেন্ট হ্যান্ডলিংও করা যেতে পারে, যা আপনাকে বিশেষভাবে একটি ডাবল ক্লিক করার পর একটি নির্দিষ্ট ফাংশন চালানোর সুযোগ দেয়।

• ডাবল ক্লিক ইভেন্ট:

  import { Component } from '@angular/core';
  import * as Highcharts from 'highcharts';
  
  @Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.css']
  })
  export class ChartComponent {
    Highcharts = Highcharts;
    chartOptions = {
      chart: {
        type: 'column',
        events: {
          dblclick: function (event) {
            alert('Double clicked at: ' + event.xAxis[0].value);
          }
        }
      },
      title: {
        text: 'Double Click Event Example'
      },
      series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5, 6]
      }]
    };
  }
  

এখানে, যখন আপনি চার্টের উপর ডাবল ক্লিক করবেন, তখন event.xAxis[0].value ক্লিকের x-অ্যাক্সিসের মান প্রদর্শন করবে।

4. মাউসওভার ইভেন্ট হ্যান্ডলিং

Highcharts এ মাউসওভার ইভেন্টের মাধ্যমে আপনি কোন পয়েন্টে মাউস রাখলে কিছু একশন নিতে পারেন।

• মাউসওভার ইভেন্ট:

  import { Component } from '@angular/core';
  import * as Highcharts from 'highcharts';
  
  @Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.css']
  })
  export class ChartComponent {
    Highcharts = Highcharts;
    chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Mouseover Event Example'
      },
      plotOptions: {
        series: {
          point: {
            events: {
              mouseOver: function () {
                alert('Mouseover event triggered on point: ' + this.category);
              }
            }
          }
        }
      },
      series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5, 6]
      }]
    };
  }
  

এখানে, আপনি যখন কোনও পয়েন্টের উপর মাউস রাখবেন, তখন সেই পয়েন্টের ক্যাটেগরি দেখাবে।

5. ইভেন্ট হ্যান্ডলিং: Zoom এবং Panning

Highcharts এর মাধ্যমে আপনি zoom এবং panning ইভেন্টও হ্যান্ডল করতে পারেন। এটি সাধারণত xAxis এবং yAxis এর মাধ্যমে ব্যবহৃত হয়।

• Zoom ইভেন্ট হ্যান্ডলিং:

  chart: {
    events: {
      selection: function(event) {
        alert('Zoomed: ' + event.xAxis[0].min + ' to ' + event.xAxis[0].max);
      }
    }
  }
  

সারাংশ

Highcharts ব্যবহার করে আপনি চার্টের ক্লিক, হোভার, ডাবল ক্লিক এবং মাউসওভার ইভেন্ট হ্যান্ডল করতে পারেন। এই ইভেন্টগুলো আপনাকে চার্টের ইন্টারঅ্যাকশন আরও গতিশীল এবং ব্যবহারকারী-বান্ধব করতে সহায়ক হবে। আপনি ইভেন্টগুলো ব্যবহার করে ইউজার ইন্টারঅ্যাকশন অনুযায়ী চার্টের আচরণ কাস্টমাইজ করতে পারেন, যেমন রঙ পরিবর্তন, টুলটিপ দেখানো বা অন্য কোনো বিশেষ কার্যক্রম চালানো।